<template>
  <div class="courseSystem">
    <div class="wrapper">
      <div class="left">
        <h1>海量课程资源</h1>
        <p>轻松开启AI</p>
        <p>教学之旅</p>
        <div class="button">
          <img src="@/assets/course/download_right.png" alt="" />
          <h3 style="padding-left: 15px">查看更多课程</h3>
        </div>
      </div>
      <div class="right">
        <CourseSystemItem
          v-for="(item, index) in flexibleList"
          :key="index"
          :flexibleItem="item"
          @openShow="openBox(index)"
        ></CourseSystemItem>
      </div>
    </div>
  </div>
</template>

<script>
import CourseSystemItem from './components/CourseSystemItem.vue'

export default {
  data() {
    return {
      flexibleList: [
        {
          id: 0,
          isOpen: true,
          isShowText: true,
          isShowPicture: true,
          backgroundColor: '#ffec73',
          btnColor: '#a89810',
          firstText: ['小学', '应用&认知'],
          nextTopText: '基础型课程',
          classList: [
            {
              time: '4课时',
              name: '“家乡植物资源”大调查-AIGC助力生成调查报告'
            },
            { time: '4课时', name: '一起玩“玉兔闯关”' },
            { time: '5课时', name: '设计智能翻译器' },
            { time: '6课时', name: '设计家用智能预防近视仪' }
          ],
          img: 'https://www.openinnolab.org.cn/pjApp/media/primary.f961e5b0.png'
        },
        {
          id: 1,
          isOpen: false,
          isShowText: false,
          isShowPicture: false,
          backgroundColor: '#ffe0e0',
          btnColor: '#dd8b8b',
          firstText: ['小学', '应用&认知'],
          nextTopText: '基础型课程',
          classList: [
            {
              time: '4课时',
              name: '“家乡植物资源”大调查-AIGC助力生成调查报告'
            },
            { time: '4课时', name: '一起玩“玉兔闯关”' },
            { time: '5课时', name: '设计智能翻译器' },
            { time: '6课时', name: '设计家用智能预防近视仪' }
          ],
          img: 'https://www.openinnolab.org.cn/pjApp/media/primary.f961e5b0.png'
        },
        {
          id: 2,
          isOpen: false,
          isShowText: false,
          isShowPicture: false,
          backgroundColor: '#bfddff',
          btnColor: '#6f94c9',
          firstText: ['小学', '应用&认知'],
          nextTopText: '基础型课程',
          classList: [
            {
              time: '4课时',
              name: '“家乡植物资源”大调查-AIGC助力生成调查报告'
            },
            { time: '4课时', name: '一起玩“玉兔闯关”' },
            { time: '5课时', name: '设计智能翻译器' },
            { time: '6课时', name: '设计家用智能预防近视仪' }
          ],
          img: 'https://www.openinnolab.org.cn/pjApp/media/primary.f961e5b0.png'
        }
      ],
      active: 0
    }
  },
  components: {
    CourseSystemItem
  },
  methods: {
    openBox(i) {
      if (this.active === i) {
        return
      }
      this.active = i
      this.flexibleList.forEach((element) => {
        element.isOpen = false
        element.isShowText = false
        element.isShowPicture = false
      })
      this.flexibleList[i].isOpen = true
      setTimeout(() => {
        this.flexibleList[i].isShowText = true
      }, 100)
      setTimeout(() => {
        this.flexibleList[i].isShowPicture = true
      }, 500)
    }
  }
}
</script>

<style scoped>
.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 46px 0;
}
.right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.left > .button {
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 10px 40px;
  margin-top: 40px;
  border-radius: 40px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  background-color: antiquewhite;
  transition: padding 0.5s ease;
  cursor: pointer;
}

.left > .button > img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.left > .button:hover {
  padding: 10px 70px;
}

.left > h1 {
  color: #120d2b;
  font-family: AlibabaPuHuiTi2;
  font-size: 44px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 24px;
}
.left > p {
  color: #120d2b;
  font-family: AlibabaPuHuiTi2Heavy;
  font-size: 62px;
  font-style: normal;
  line-height: 130%;
  font-weight: 600;
}
.wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.courseSystem {
  padding: 150px 0;
  background-color: rgba(249, 252, 255, 1);
}
</style>
